<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>百卓移动端H5管理后台</title>
    <link rel="stylesheet" th:href="@{layui/css/layui.css}">

    <style>
        .layui-body{top:0px;bottom:0px}
        #love{background:url("home_page/images/1.jpg");background-size:cover;height: 100%}
        /*start top*/
        .top{width:400px;height:100px;margin:60px auto;font-size:30px;font-family:"华文行楷",serif;color:#fff;
        <!--background:-webkit-linear-gradient(45deg,#ff0000,#ffcc00,#ffff99,#33ccff,#00ff33,#6600ff,#333399);
        -webkit-background-clip:text;-->}
        /*end top*/
        /*start box*/
        .box{width:310px;height:310px;margin:auto;perspective:800px;/*景深*/}
        .box .pic{position:relative;transform-style:preserve-3d;/*3d环境*/ animation:play 10s linear infinite;/*动画名称 执行时间 匀速 无限执行*/}
        .box ul li{list-style:none;position:absolute;top:0;left:0;}
        /*start box*/
        /*定义一个关键帧*/
        @keyframes play{
            from{transform:rotateY(0deg);}
            to{transform:rotateY(360deg);}
        }


        #audio_btn {
            width: 40px;
            height: 40px;
            background-image: url("home_page/images/7e0d693580f05d4938d120752614b7e8.jpg");
            background-size: contain;
            cursor:pointer;
            border-radius: 50%;
            position: relative;
            left: 90%;
            top: 5%;
        }

        .rotate {
            -webkit-animation: rotating 1.2s linear infinite;
            -moz-animation: rotating 1.2s linear infinite;
            -o-animation: rotating 1.2s linear infinite;
            animation: rotating 1.2s linear infinite
        }

        @-webkit-keyframes rotating {
            from { -webkit-transform: rotate(0) }
            to { -webkit-transform: rotate(360deg) }
        }

        @keyframes rotating {
            from { transform: rotate(0) }
            to { transform: rotate(360deg) }
        }
        @-moz-keyframes rotating {
            from { -moz-transform: rotate(0) }
            to { -moz-transform: rotate(360deg) }
        }
    </style>
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header" id="header">
            <a href="/"><div class="layui-logo">百卓移动端H5管理后台</div></a>
             <ul class="layui-nav layui-layout-right">
                 <li class="layui-nav-item">
                     <a href="javascript:;">
                         <img src="" class="layui-nav-img" id="head_pic"> <span id="username"></span>
                     </a>
                 </li>
                 <li class="layui-nav-item"><a href="javascript:;" id="layout">注销</a></li>
             </ul>
         </div>
         <div class="layui-side layui-bg-black" id="menu">
             <div class="layui-side-scroll">
                 <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                 <ul class="layui-nav layui-nav-tree" lay-filter="test">
                     <li class="layui-nav-item layui-nav-itemed">
                         <a class="" href="javascript:">模板管理</a>
                         <dl class="layui-nav-child">
                             <dd><a th:href="@{/modelList}">模板列表</a></dd>
                             <dd><a th:href="@{/modelAdd}">添加模板</a></dd>
                         </dl>
                     </li>
                     <li class="layui-nav-item layui-nav-itemed">
                         <a href="javascript:">用户管理</a>
                         <dl class="layui-nav-child">
                             <dd><a th:href="@{/userList}">用户列表</a></dd>
                             <dd><a th:href="@{/userAdd}">添加用户</a></dd>
                         </dl>
                     </li>
                 </ul>
            </div>
        </div>
        <div class="layui-body" id="love">
            <!-- 内容主体区域 -->
            <div id="audio_btn">
                <audio loop th:src="@{home_page/music/Niykee Heaton - Skin Tight.mp3}" id="media" autoplay="" preload=""></audio>
            </div>
            <div class="top">
                <!-- <marquee behavior="alternate">时光不老，我们不散</marquee> -->
                <marquee behavior="alternate">时光不老，我们不散</marquee>
            </div>
            <!--end top-->
            <!--start box-->
            <div class="box">
                <div class="pic">
                    <ul>
                        <li><img th:src="@{home_page/images/1.png}" width="" height="" alt=""></li>
                        <li><img th:src="@{home_page/images/2.png}" width="" height="" alt=""></li>
                        <li><img th:src="@{home_page/images/3.png}" width="" height="" alt=""></li>
                        <li><img th:src="@{home_page/images/4.png}" width="" height="" alt=""></li>
                        <li><img th:src="@{home_page/images/5.png}" width="" height="" alt=""></li>
                        <li><img th:src="@{home_page/images/6.png}" width="" height="" alt=""></li>
                    </ul>
                </div>
            </div>

            <!--  <embed src="/static/home_page/music/ef1256e25f3971f49df6ccb59b424c40.mp3" hidden="true">-->
        </div>
    </div>
    <script th:src="@{layui/layui.all.js}"></script>
    <script th:src="@{home_page/js/jquery.min.js}"></script>
    <!--雪花-->
    <script th:src="@{home_page/js/snow.js}"></script>
    <script>

        $(".pic ul li").each(function(i){//遍历
            var deg=360/$(".pic ul li").size();//size个数
            //当前的li对象 添加css样式
            $(this).css({"transform":"rotateY("+deg*i+"deg) translateZ(216px)"});

            $.fn.snow({
                minSize:10,
                maxSize:15,
                newOn:500,
                flakeColor:"#ffffff"
            });
        });
        var x = document.getElementById("media");
        $(function(){
            x.pause();
            $("#audio_btn").click(function(){
                $(this).toggleClass("rotate"); //控制音乐图标 自转或暂停
                //控制背景音乐 播放或暂停
                if($(this).hasClass("rotate")){
                    x.play();
                }else{
                    x.pause();
                }
            })
        });

        //JavaScript代码区域
        layui.use('element', function() {
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;
            remember_user = JSON.parse(sessionStorage.getItem("remember_user"))
            if (!remember_user) {
                window.location.href = '/login'
            }
            $('#head_pic').attr("src", remember_user.headPic)
            $('#username').html(remember_user.name)
            $('#layout').click(function () {
                layer.confirm('是否退出当前用户？', {
                    btn: ['退出','取消'], //按钮
                    title: "提示"
                }, function(){
                    sessionStorage.removeItem("remember_user")
                    window.location.href = '/login'
                });
            })
        });
    </script>
</body>

</html>